<template>
  <el-dialog
    v-model="dialogVisible"
    title="拆箱"
    width="500px"
    @close="closeDialog"
  >
    <el-form label-position="left" label-width="100px">
      <el-form-item label="条码">
        <el-input
          v-model="state.formInfo.barcode"
          :disabled="true"
          style="width: 80%"
        />
      </el-form-item>
      <el-form-item label="条码可用">
        <el-input
          v-model="state.formInfo.qty"
          :disabled="true"
          style="width: 80%"
        />
      </el-form-item>
      <el-form-item label="生成个数">
        <el-input-number
          v-model="state.formInfo.cxNum"
          @change="changCxNum"
          :precision="0"
          style="width: 80%"
        />
      </el-form-item>
      <el-form-item label="箱内数量">
        <el-input-number
          v-model="state.formInfo.cxQty"
          style="width: 80%"
          @change="changCxQty"
        />
      </el-form-item>
      <el-form-item label="是否并箱" :span="12">
        <el-switch
          v-model="state.formInfo.isBx"
          active-text="是"
          :active-value="true"
          inactive-text="否"
          :inactive-value="false"
          inline-prompt
          size="small"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="save">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
  import { ref } from 'vue'
  import { localStorageConfig } from '@/config/localstorage.config'
  import { barcodeUnboxApi } from '@/api/kc/barcode_xc'
  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)
  const $baseMessage = inject('$baseMessage')
  const $baseLoading = inject('$baseLoading')
  const dialogVisible = ref(false)
  const state = reactive({
    pkCorp: pkCorp,
    formInfo: {},
    kcmain: {},
  })
  const openDialog = (row, type) => {
    if (2 === type) {
      state.formInfo.cxQty = row.kyQty
      state.formInfo.qty = row.kyQty
    } else if (3 === type) {
      state.formInfo.cxQty = row.mesQty
      state.formInfo.qty = row.mesQty
    }
    dialogVisible.value = true
    state.formInfo.isBx = false
    state.formInfo.cxNum = 1
    state.formInfo.barcode = row.barcode
    state.kcmain = row
    state.formInfo.state = type
  }

  const changCxQty = (curVal) => {
    state.formInfo.cxNum = Math.floor(state.formInfo.qty / curVal)
  }
  const changCxNum = (curNum)=>{
    state.formInfo.cxQty = Math.floor(state.formInfo.qty / curNum)
  }

  const save = () => {
    if (state.formInfo.cxNum > 0 && state.formInfo.cxQty > 0) {
      ElMessageBox.confirm('确定进行拆箱操作吗?', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          state.kcmain.cxNum = state.formInfo.cxNum
          state.kcmain.cxQty = state.formInfo.cxQty
          state.kcmain.isBx = state.formInfo.isBx
          state.kcmain.state = state.formInfo.state
          state.kcmain.qty = state.formInfo.qty
          const load = $baseLoading()
          const { code, data, msg } = await barcodeUnboxApi({ ...state.kcmain })
          if (code === 2000) {
            dialogVisible.value = false
            $baseMessage(msg, 'success')
            _emit('unbox-success-callback')
          } else {
            $baseMessage(data, 'error')
          }
          load.close()
        })
        .catch(() => {})
    } else {
      $baseMessage('请填写相关的拆箱个数和数量！', 'warning')
    }
  }
  const closeDialog = () => {
    dialogVisible.value = false
  }
  defineExpose({ openDialog })
  const _emit = defineEmits(['unbox-success-callback'])
</script>
